/*************************
  View Editor variables & mixins
*************************/
@use "ve-base/ve-colors" as *;
@use "ve-base/ve-mixins" as *;
@forward "ve-base/ve-typography";
@forward "ve-base/ve-mixins";
@forward "ve-base/ve-colors";

$background-hover-transition: background-color 0.2s linear;
$background-easeout-transition: background-color 0.1s ease-out;
$nav-height: 36px;
$nav-banner: 20px;
$nav-project: 56px;
$nav-total: 92px;
$footer-height: 13px;
$pane-center-text-width: 10in;

@viewport {
  width: 100vw;
}

@include selection {
  background-color: $light-blue !important;
}

$background-hover-transition: background-color .2s linear;

a:hover {
  cursor: pointer;
}

figure {
  text-align: center;
  display: inline-block;
}

figure > figcaption {
  text-align: center;
  display: block;
}

// Align image left
.image-left {
  margin-left: 0;
}

// Align image and figure right
.image-right {
  display: inline-block;
  > img {
    text-align: right;
  }
}

img.image-right {
  display: block;
  margin-left: auto;
}

img.image-center {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

figure.image-right {
  display: block;
  max-width: $pane-center-text-width;
  text-align: right;
}

// Center image and figure
.image-center,
figure.image-center {
  text-align: center;
  max-width: $pane-center-text-width;
}

table[align="right"] {
  display: block;
  float: none;
  margin-left: auto;
}

table[align="left"] {
  display: block;
  float: none;
}

table[align="center"] {
  display: block;
  float: none;
  margin: auto;
}
